<template>
  <a-modal :title="title" :after-close="reset" @ok="submit">
    <a-form
      ref="formRef"
      :model="form"
      :rules="rules"
      :label-col="{ style: { width: '80px' } }"
    >
      <a-form-item label="管理员" name="uid">
        <a-select
          v-model:value="form.uid"
          placeholder="请选择"
          style="width: 50%"
          clearable
          @change="setUser"
        >
          <a-select-option
            v-for="item in admins"
            :key="item.id"
            :value="item.id"
          >
            {{ item.realName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="所属提货点：" name="storeId">
        <a-select
          v-model:value="form.storeId"
          placeholder="请选择"
          style="width: 50%"
          clearable
        >
          <a-select-option
            v-for="item in storeSelectList"
            :key="item.id"
            :value="item.id"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="核销员名称：" name="staffName">
        <a-input v-model:value="form.staffName" placeholder="店员名称" />
      </a-form-item>
      <a-form-item label="手机号码" name="phone">
        <a-input v-model:value="form.phone" placeholder="手机号码" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { adminList } from '@/api/user';
import type { Istore } from '../address/entity';
import { storestaffinfo, storestaffAddup,storeListApi } from './api';
import { systemstorestaff, type Isystemstorestaff } from './entity';
import { validReg } from '@/utils/validate';
import type { IUser } from '@/types/user';

const props = withDefaults(defineProps<{
  data: Partial<Isystemstorestaff>
}>(),{
})
const title = computed(() => props.data.uid ? '编辑' : '新增')
const { formRef, submit, close } = useDialog({ validCallback: save })

let form = $ref(new systemstorestaff())
watchEffect(() => {
  if (props.data.uid) {
    storestaffinfo(props.data.uid).then(res => {
      form.setProps(res)
    })
  }
})

const rules = {
  staffName: [validReg('required', '请输入用户名')],
  storeId: [validReg('required', '值不能为空')],
  uid: [validReg('required', '值不能为空')],
  phone: [validReg('required', '值不能为空'),validReg('phone', '手机号有误')],
}

onMounted(() => {
  storeList()
  getadmin()
})
const setUser = (val:number)=>{
  let row = admins.filter(e=>e.id==val)[0]
  form.avatar = row.account
  form.uid = row.id;
}
let storeSelectList = $ref<Istore[]>([])
function storeList() {
  let artFrom = {
    page: 1,
    limit: 9999,
    status: '1',
    keywords: ''
  };
  storeListApi(artFrom).then(res => {
    storeSelectList = res.list;
  })
}
let admins = $ref<IUser[]>([])
function getadmin() {
  let artFrom = {
    page: 1,
    limit: 9999,
    status: '1',
    keywords: ''
  };
  adminList(artFrom).then(res => {
    admins = res.list;
  })
}

const emit = defineEmits(['change'])
function save() {
    storestaffAddup(form).then(() => {
    AntMessage.success('保存成功')
    close()
    emit('change')
  })
}

function reset() {
  form = new systemstorestaff()
}
</script>

<style lang="less"></style>
